<template>
  <div class="silder">
    <div class="cur_time">{{info.current_time | time_filter}}</div>
    <van-slider
      button-size="10"
      active-color="#ff9976"
      v-model="value"
      :min="0"
      :max="info.duration"
      @drag-start="is_dray = true"
      @drag-end="is_dray = false"
      @change="change_current_time"
    />
    <div class="durtion">{{ info.duration | time_filter }}</div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      value: 0,
      is_dray: false, // 表示是否处于拖拽中
    };
  },
  filters: {
    time_filter(val) {
      if (!val) {
        val = 0;
      }
      let m = parseInt(val / 60)
        .toString()
        .padStart(2, 0);
      let s = parseInt(val % 60)
        .toString()
        .padStart(2, 0);
      return m + ":" + s;
    },
  },
  computed: {
    ...mapState({
      info: "current_song_info",
    }),
  },
  methods: {
    change_current_time(val) {
      console.log("变化结束后的位置", val);
      this.$audio.currentTime = val;
    },
  },
  watch: {
    info: {
      handler: function (new_val) {
        //   console.log("监听成功", new_val);
        // 如果当前不在拖拽中,则修改 slider v-model 绑定的值
        if (!this.is_dray) {
          this.value = new_val.current_time;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.silder {
  position: fixed;
  bottom: 23%;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  .van-slider {
    width: 68%;
    margin: 0 10px;
  }
}
</style>